<template>
    <div class="container">
        <!-- 路径导航区域 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>咨询预约管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 搜索区域 -->
        <el-row>
            <el-form :inline="true">
                <el-form-item label="咨询预约类型">
                    <el-input v-model="queryInfo.type" clearable @clear="queryList" placeholder="请输
入咨询预约名称"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="queryList">搜索</el-button>
                    <el-button type="primary" @click="toAddHeartMark">新增咨询预约</el-button>
                    <el-button type="danger" @click="deleteByIds">批量删除</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <!-- 表格区域 -->
        <el-table :data="consultWaitList" border style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="id" label="ID"></el-table-column>
            <el-table-column prop="type" label="咨询类型"></el-table-column>
            <el-table-column prop="createTime" label="咨询时间"></el-table-column>
            <el-table-column prop="content" label="咨询内容"> </el-table-column>
            <el-table-column prop="status" label="咨询状态"></el-table-column>

            <el-table-column label="操作">
                <template slot-scope='scope'>
                    <el-link type="primary" @click="toEditConsultWait(scope.row)">编辑咨询预约</el-link>
                    <el-link type="primary" @click="todeleteConsultWait(scope.row)">删除咨询预约</el-link>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="queryInfo.pageNum" :page-sizes="[2, 5, 10, 20]" :page-size="queryInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>


        <!-- 新增和修改的对话框 -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="cancle">
            <el-form :model="consultWaitData">
                <el-form-item label="咨询类型" label-width="80px">
                    <el-input placeholder="请输入咨询类型" v-model="consultWaitData.type"></el-input>
                </el-form-item>
                <el-form-item label="咨询时间" label-width="80px">
                    <!-- <el-input placeholder="请输入咨询时间" v-model="consultWaitData.createTime"></el-input> -->

                    <el-date-picker v-model="consultWaitData.createTime" type="date" placeholder="选择咨询时间">
                    </el-date-picker>
                </el-form-item>


                <el-form-item label="咨询内容" label-width="80px">
                    <el-input placeholder="请输入咨询内容" v-model="consultWaitData.content"></el-input>
                </el-form-item>

                <el-form-item label="咨询状态" label-width="80px">
                    <el-input placeholder="请输入咨询状态" v-model="consultWaitData.status"></el-input>
                </el-form-item>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancle">取 消</el-button>
                <el-button type="primary" @click="addCourse">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
export default {
    data() {
        return {
            // 查询信息对象
            queryInfo: {
                type: '',
                pageNum: 1,
                pageSize: 10
            },
            total: 183,
            consultWaitList: [],
            title: '', // 对话框标题
            dialogFormVisible: false, // 是否显示对话框
            consultWaitData: { // 咨询预约对象
                "id": '',
                "type": '',
                "createTime": '',
                "content": '',
                "teacherId": '',
                "userId": '',
                "status": ''
            },

            obs: [],//批量删除
            ids: [],//批量删除

          
        }
    },
    mounted() {
        this.queryList();
    },
    methods: {

        deleteByIds() {
            if (this.obs.length == 0) {
                this.$message.success("没选数据，删除失败")
                return;
            }
            for (let it of this.obs) {
                this.ids.push(it.id)
            }
            // console.log(this.ids);
            this.$confirm('确认删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 用户点击了确定按钮，执行相应的操作  
                this.$http.delete('consultWait/removeBatch?ids=' + this.ids)
                    .then((result) => {
                        this.$message.success(result.data.message)
                        if (this.total % this.queryInfo.pageSize == 1 || this.queryInfo.pageSize == 1) {
                            if (this.total != 1) {
                                this.queryInfo.pageNum--;
                            }
                        }
                        this.queryList()
                    })
            }).catch(() => {
                // 用户点击了取消按钮，执行相应的操作  
                this.$message.error('删除失败')
            });
        },
        //批量删除
        handleSelectionChange(val) {
            this.obs = val;

        },

        //删除文章
        todeleteConsultWait(row) {
            this.$confirm('确认删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 用户点击了确定按钮，执行相应的操作  
                this.$http.delete('consultWait/remove/' + row.id)
                    .then((result) => {
                        this.$message.success(result.data.message)
                        if (this.total % this.queryInfo.pageSize == 1 || this.queryInfo.pageSize == 1) {
                            if (this.total != 1) {
                                this.queryInfo.pageNum--;
                            }
                        }
                        this.queryList()
                    })
            }).catch(() => {
                // 用户点击了取消按钮，执行相应的操作  
                this.$message.error('删除失败')
            });
        },

        // 添加文章
        addCourse() {
            if (this.consultWaitData.id) { // 有值为true  修改
                this.$http.put("consultWait/edit", this.consultWaitData)
                    .then(resp => {
                        if (resp.data.status == 200) {
                            // 消息提示
                            this.$message.success('修改成功！');
                            // 清空数据
                            this.cancle()
                            // 关闭对话框
                            this.dialogFormVisible = false;
                            // 重新查询
                            this.queryList()

                        } else {
                            this.$message.error('接口异常！')
                        }
                    })

            } else {
                this.$http.post("consultWait/add", this.consultWaitData)
                    .then(resp => {
                        if (resp.data.status == 200) {
                            // 消息提示
                            this.$message.success('添加成功！');
                            // 清空数据
                            this.cancle()
                            // 关闭对话框
                            this.dialogFormVisible = false;
                            // 重新查询
                            this.queryList()

                        } else {
                            this.$message.error('接口异常！')
                        }
                    })
            }
        },
        // 进入修改的预览数据页面
        toEditConsultWait(row) {
            //console.log(row)
            // 赋值
            this.consultWaitData = row;
            // 设置标题
            this.title = "修改文章";
            // 开启对话框
            this.dialogFormVisible = true;

        },
        // 进入添加的对话框
        toAddHeartMark() {
            this.title = "新增咨询预约";
            this.dialogFormVisible = true;
            // 把当前登录的用户的id赋值为文章的teacher_id
            // this.article.teacherId = sessionStorage.getItem('userid');
        },
        // 取消对话框
        cancle() {
            this.queryList();
            this.dialogFormVisible = false;
            this.consultWaitData = { // 咨询预约对象
                "id": '',
                "type": '',
                "createTime": '',
                "content": '',
                "teacherId": '',
                "userId": '',
                "status": ''
            }

        },

        queryList() {
            // 调用后端接口来获取数据
            this.$http.get('consultWait/find', {
                params: this.queryInfo
            })
                .then(resp => {
                    if (resp.data.status == 200) {
                        // console.log(resp.data.data.list.content)
                        this.consultWaitList = resp.data.data.list;
                        this.total = resp.data.data.total;
                         //console.log(resp.data.data.list.createTime)
                    } else {
                        this.$message.error('查询失败！')
                    }
                })
        },

        handleSizeChange(size) {
            //console.log('每页显示数量发生改变');
            this.queryInfo.pageSize = size;
            this.queryInfo.pageNum = 1;
            // 重新查询
            this.queryList()
        },
        handleCurrentChange(num) {
            //console.log('页码发生改变');
            this.queryInfo.pageNum = num;
            // 重新查询
            this.queryList();
        }
    }

}



</script>

<style lang="scss" scoped></style>